<template>
  <div class="Echarts">
    <div id="main" style="width: 580px;height: 296px;"></div>
  </div>
</template>
 
<script>
export default {
  name: 'Echarts',
  methods: {
    myEcharts(){
      var myChart = this.$echarts.init(document.getElementById('main'));
      //配置图表
      var option =  {
  tooltip: {
    trigger: 'item'
  },
  legend: {
    top: '5%',
    left: 'center'
  },
  series: [
    {
      name: 'Access From',
      type: 'pie',
      radius: ['40%', '70%'],
      avoidLabelOverlap: false,
      itemStyle: {
        borderRadius: 10,
        borderColor: '#fff',
        borderWidth: 2
      },
      label: {
        show: false,
        position: 'center'
      },
      emphasis: {
        label: {
          show: true,
          fontSize: '40',
          fontWeight: 'bold'
        }
      },
      labelLine: {
        show: false
      },
      data: [
        { value: 1048, name: '雪票' },
        { value: 735, name: '教练' },
        { value: 580, name: '酒店' },
        { value: 484, name: '卡类' },
        { value: 300, name: '其他' }
      ]
    }
  ]
};
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      myChart.setOption(option);
      myChart.setOption({
          color:['#58AFFF'],
      })
    }
  },
  mounted(){
    this.myEcharts();
  }
}
</script>
 
<style>
 div /deep/ element.style {
    position: absolute;
    left: 0px;
    top: 0px;
    width: 600px;
    height: 355px;
    user-select: none;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    padding: 0px;
    margin: 0px;
    border-width: 0px;
}
</style>